<template>
    <div class="body">
        <section>
            <div class="color"></div>
            <div class="color"></div>
            <div class="color"></div>
        </section>
    </div>
</template>

<script setup>

</script>

<style lang="less" scoped>
.body {
    overflow: hidden;

    section {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
    }

    section .color {
        position: absolute;
        filter: blur(150px);
    }

    section .color:nth-child(1) {
        top: -350px;
        width: 600px;
        height: 600px;
        background: #ff359b;
    }

    section .color:nth-child(2) {
        bottom: -150px;
        left: 100px;
        width: 500px;
        height: 500px;
        background: #fffd87;
    }

    section .color:nth-child(3) {
        bottom: 50px;
        right: 100px;
        width: 500px;
        height: 500px;
        background: #00d2ff;

    }
}
</style>